<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/js/core.util.js"></script>

    <style>
        .layui-tab-title .layui-this { background-color:#009688; color: #eee;}
        .first-tab i.layui-tab-close{
            display:none!important;
        }
    </style>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">后台管理系统</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a id="deptName" href="javascript:;"></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;" style="margin-right: 15px">
                        <i class="layui-icon layui-icon-username" style="font-size: 30px; color:#1E9FFF;"></i>
                        <span id="nickName" ></span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-id="userProper" data-title="基本资料" data-url=""
                               class="menuNvaBar">基本资料</a></dd>
                        <dd><a href="javascript:;" data-id="userSafe" data-title="安全设置" data-url=""
                               class="menuNvaBar">更换密码</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;" id="logout">退出</a></li>
            </ul>
        </div>
        <!-- 左侧菜单-->
        <div id="mainmenu" class="layui-side layui-bg-black" >
            <div class="layui-side-scroll">
                <div class="navBar layui-side-scroll" id="navBarId"></div>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div class="layui-tab" lay-filter="tab" lay-allowclose="true">
                <ul class="layui-tab-title">
                    <li class="first-tab layui-this">主页</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" >
                        <iframe th:src="@{/index/main}" frameborder="0" name="content" width="100%"
                                id="home" scrolling="yes"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        layui.use(['jquery','element','layer'],function () {
            var layer = layui.layer;
            var $ =layui.jquery;
            var element = layui.element;
            frameWH();
            /*设置主体内容层高度*/
            function frameWH() {
                var h = $(window).height() - 41 - 10 - 35 - 10 - 44 - 49;
                $("iframe").css("height", h + "px");
            };

            //递归获取导航栏无线层级
            var getChild=function (item,ulHtml) {
                ulHtml += '<dl class="layui-nav-child">';
                $.each(item,function (index,child) {
                    if(child.children !=null&& child.children.length>0){
                        ulHtml +='<a>'+child.title+'</a>';
                        ulHtml +=getChild(child.children,"");
                    }else {
                        ulHtml += '<dd><a href="javascript:;" data-url="'+child.url+'" datatitle="'+child.title+'" data-id="'+child.id+'" class="menuNvaBar">';
                        ulHtml += '<cite>'+child.title+'</cite></a></dd>';
                    }
                });
                ulHtml += "</dl>"
                return ulHtml;
            };
            CoreUtil.sendAjax("/api/home",null,function (res) {
                $("#deptName").html("所属机构:"+res.data.userInfo.deptName);
                $("#nickName").html(res.data.userInfo.username);
                var data=res.data.menus;
                if(data!= "" && data.length>0){
                    var ulHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav">';
                    if(data!= null&&data.length > 0){
                        $.each(data,function(index,item){
                            if(index == 0){
                                ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
                            }else{
                                ulHtml += '<li class="layui-nav-item">';
                            }
                            ulHtml += '<a href="javascript:;">';
                            ulHtml += '<cite>'+item.title+'</cite>';
                            ulHtml += '</a>'
                            if(item.children != null && item.children.length > 0){
                                ulHtml += '<dl class="layui-nav-child">';
                                $.each(item.children,function(index,child){
                                    if(child.children !=null&& child.children.length>0){
                                        ulHtml +='<a>'+child.title+'</a>';
                                        ulHtml +=getChild(child.children,"");
                                    }else {
                                        ulHtml += '<dd><a href="javascript:;" data-url="'+child.url+'"data-title="'+child.title+'" data-id="'+child.id+'" class="menuNvaBar">';
                                        ulHtml += '<cite>'+child.title+'</cite></a></dd>';
                                    }
                                });
                                ulHtml += "</dl>"
                            }
                            ulHtml += '</li>'
                        });
                    }
                    ulHtml += '</ul>';
                    $(".navBar").html(ulHtml);
                    element.init(); //初始化页面元素
                }else{
                    $("#navBarId").empty();
                }
                top.layer.closeAll();
            },"GET",false);

            $(document).on('click','.menuNvaBar',function () {
                var dataid = $(this);
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                } else {
                    var isData = false;
                    //判断是否是已打开tab,有则切换，无则创建tab
                    $.each($(".layui-tab-title li[lay-id]"), function () {
                        if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                    }
                }
                active.tabChange(dataid.attr("data-id"));
            });
            //退出账号
            $(document).on('click','#logout',function(){
                CoreUtil.sendAjax('/api/user/logout',null,function (res) {

                },'GET',true);
            });
            //封装触发事件
            var active={
                tabAdd : function (url,id,title) {
                    layer.msg(title);
                    if(url!=""&&url!=null&&url!=undefined){
                        element.tabAdd('tab',{
                            title: title
                            , content: '<iframe data-frameid="' + id + '" frameborder="0" name="content" width="100%" src="' + url + '"></iframe>'
                            , id: id
                        })
                    }
                    frameWH();//计算框架高度
                },
                tabChange: function (id) {
                    //切换到指定Tab项
                    element.tabChange('tab', id); //切换到：用户管理
                    $("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id +
                        "']").attr("src"))//切换后刷新框架
                },
                tabDelete: function (id) {
                    element.tabDelete("tab", id);//删除
                }
            };
        });

    </script>
</body>
</html>